<template>
  <div>
    <el-dialog width="900px" top="20px" style="height: auto; " :visible.sync="dialogVisible" v-bind="$attrs" v-on="$listeners" :title="title" >
      <el-row :gutter="15">
        <el-form ref="elForm" style="max-height:400px;overflow: auto;" :model="formData" :rules="rules" size="medium" label-width="110px"
                 label-position="left">
          <el-col :span="12">
            <el-form-item label="通道名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入道通名称" show-word-limit clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="操作类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择操作类型" clearable :style="{width: '100%'}"  @change="changeInput">
                <el-option v-for="(item, index) in types" :key="index" :label="item.code"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="主机ip" prop="host">
              <el-input v-model="formData.host" placeholder="主机ip" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="主机服务端口" prop="port" >
              <el-input v-model="formData.port" placeholder="请输入主机服务端口" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isDbType==false">
            <el-form-item label="数据库类型" prop="dbtype">
              <el-select v-model="formData.dbtype" placeholder="请选择数据库类型" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in dbtypes" :key="index" :label="item.name"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isDbName==false">
            <el-form-item label="数据库名称" prop="dbname">
              <el-input v-model="formData.dbname" placeholder="请输入数据库名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据源用户名" prop="username">
              <el-input v-model="formData.username" placeholder="请输入数据源用户名" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="数据源密码" prop="password">
              <el-input v-model="formData.password" placeholder="请输入数据源密码" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isFilePath==false">
            <el-form-item label="文件路径" prop="path" >
              <el-input v-model="formData.path" placeholder="请输入文件路径" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isFileName==false">
            <el-form-item label="文件名" prop="filename">
              <el-input v-model="formData.filename" placeholder="请输入文件名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否启用" prop="active">
              <el-switch
                v-model="formData.active"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <el-input v-model="formData.description" type="textarea" placeholder="请输入描述"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" resize="none" ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {},
  props: [],
  data() {
    return {
      isDbType:false,
      isDbName:false,
      isFilePath:false,
      isFileName:false,
      dialogVisible:false,
      title:"添加通道",
      formData: {
        id:"",
        name: '',
        type: "",
        host: "",
        port: "",
        username: "",
        password:"",
        path: "",
        filename: "",
        dbtype: "",
        dbname: '',
        active: 0,
        description: "",
      },
      rules:{
        dbname: [{ required: true, message: '数据库名称不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '通道名称不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '请选择操作类型', trigger: 'blur' }],
        username: [{ required: true, message: '请输入数据库用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入数据库密码', trigger: 'blur' }],
        dbtype: [{ required: true, message: '请选择数据库类型', trigger: 'blur' }],
        path: [{ required: true, message: '请输入文件路径', trigger: 'blur' }],
        filename: [{ required: true, message: '请输入文件名', trigger: 'blur' }],
        /*/^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/*/
        port:[
          { required:true,pattern: /^[0-9]*$/, message: '请输入正确格式',tigger:'blur' }
        ],
        host:[
          {required:true, pattern: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/, message: '请输入正确格式',tigger:'blur' }
        ],
      },
      dbtypes: [{
        "name": "mysql",
        "id": 1
      }, {
        "name": "oracle",
        "id": 2
      }, {
        "name": "sqlServer",
        "id": 3
      }],
      types:[]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getTypes(){
      this.$http({
        url: this.$http.adornUrl('/tbssbuschannel/dbtype'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.types = data.date;
        }
      })
    },
    init(id){
      this.isFileName=false
      this.isFilePath=false
      this.isDbType=false
      this.isDbName=false
      this.getTypes();
      if(id){
        this.title="修改通道"
        this.$http({
          url: this.$http.adornUrl('/tbssbuschannel/getById/'+id),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
                this.formData=data.date;
                if(this.formData.type==115){
                  this.showDb();

                }else if(this.formData.type==117){
                  this.showFtp()
                }
          }else {
            this.$message.error(data.msg);
          }
        })

      }else {
        this.formData={}
      }
      this.dialogVisible=true;
    },
    showDb(){
      this.isFileName=true
      this.isFilePath=true
      this.isDbType=false
      this.isDbName=false
/*      this.rules= {
        dbname: [{ required: true, message: '数据库名称不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '通道名称不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '请选择操作类型', trigger: 'blur' }],
        username: [{ required: true, message: '请输入数据库用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入数据库密码', trigger: 'blur' }],
        dbtype: [{ required: true, message: '请选择数据库类型', trigger: 'blur' }],
      }*/
    },
    showFtp(){
      this.isDbType=true
      this.isDbName=true
      this.isDbUserName=true
      this.isDbPassword=true
      this.isFilePath=false
      this.isFileName=false
/*      this.rules= {
        name: [{ required: true, message: '通道名称不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '请选择操作类型', trigger: 'blur' }],
        path: [{ required: true, message: '请输入文件路径', trigger: 'blur' }],
        filename: [{ required: true, message: '请输入文件名', trigger: 'blur' }],
        /!*!/^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/!*!/
        port:[
          { required:true,pattern: /^[0-9]*$/, message: '请输入正确格式',tigger:'blur' }
        ],
        host:[
          {required:true, pattern: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/, message: '请输入正确格式',tigger:'blur' }
        ],
      }*/
    },
    changeInput(value){
     if(value===115){
      this.showDb()
     }
     else if(value===117){
       this.showFtp()
     }
    },
    close() {
      this.dialogVisible=false
      this.$emit('refreshDataList')
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/tbssbuschannel/saveOrupdate'),
            method: 'post',
            data: this.$http.adornData({
              'id':this.formData.id,
              'name': this.formData.name,
              'type': this.formData.type,
              'host': this.formData.host,
              'port': this.formData.port,
              'username': this.formData.username,
              'password': this.formData.password,
              'path': this.formData.path,
              'filename': this.formData.filename,
              'dbtype': this.formData.dbtype,
              'dbname': this.formData.dbname,
              'active': this.formData.active,
              'description': this.formData.description
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.formData.id?"修改成功":"添加成功",
                type: "success",
                duration: 1500,
              });
              this.close();
            }else {
              this.$message.error(data.msg);
            }
          })
        }
      })
    },
  }
}

</script>
<style>
</style>
